require('./Pagejdmain.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import Steps,{ Step } from 'rc-steps';
import 'rc-steps/assets/index.css';
import 'rc-steps/assets/iconfont.css';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import MFooter from '../../../components/mfooter/index'
import {Control} from 'react-keeper';
import sghtba  from './../../../assets/img/sghtba.png';
import shz  from './../../../assets/img/shz.png';
import ytg  from './../../../assets/img/ytg.png';
import xmbrybg  from './../../../assets/img/xmbrybg.png';
import saoyisao  from './../../../assets/img/saoyisao.png';
import sgxkz  from './../../../assets/icon/zhzj/施工许可查询.png';


class Jdmain extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange=this.handleChange.bind(this);
    this.handleSubmit=this.handleSubmit.bind(this);
    this.handleSaoyisao=this.handleSaoyisao.bind(this);
  }

  handleChange(text){
    Actions.handleChange(text);
  }

  handleSubmit(text){
    Actions.handleSubmit(text);
  }

  handleSaoyisao(){
    Actions.saoyisao();
  }

  render() {
    return (
      <div className="jdmain">
          <SearchBar ref="searchbar"
            onChange={this.handleChange}
            onSubmit={this.handleSubmit}
            defaultValue={this.state.jdmain.searchText}
            placeholder="搜索工程"
          >

          </SearchBar>
          <img src={saoyisao} className="xxxx" onClick={this.handleSaoyisao}/>

          {
            this.state.jdmain.searchText ?
              <Panel style={{marginTop: 0}}>
                <PanelHeader>
                  <img src={this.state.jdmain.type==1?sgxkz:this.state.jdmain.type==2?xmbrybg:
                    this.state.jdmain.type==3?sghtba:null}
                       style={{
                         width:30,
                         height:30,
                         verticalAlign:"bottom"
                       }}/>
                  &nbsp;
                  <span className="sgxkz">{this.state.jdmain.type==1?"施工许可证":this.state.jdmain.type==2?"项目部人员变更":
                    this.state.jdmain.type==3?"施工合同备案":null}</span>

                </PanelHeader>
                <PanelBody>
                  {this.state.jdmain.type==1?
                    <Cells style={{
                      marginTop:0,
                      borderBottom:"none"
                    }}>
                      <Cell>
                        <CellBody className="liucheng">
                          编号：{this.state.jdmain.results.id}
                        </CellBody>
                      </Cell>
                      <Cell>
                        <CellBody className="liucheng">
                          项目名称：{this.state.jdmain.results.xmmc}
                        </CellBody>
                      </Cell>
                      <Cell access link>
                        <CellBody className="liucheng">附件</CellBody>
                        <CellFooter />
                      </Cell>
                    </Cells>
                    :this.state.jdmain.type==2?
                      <Cells style={{
                        marginTop:0,
                        borderBottom:"none"
                      }}>
                        <Cell>
                          <CellBody className="liucheng">
                            编号：{this.state.jdmain.results.id}
                          </CellBody>
                        </Cell>
                        <Cell>
                          <CellBody className="liucheng">
                            项目名称：{this.state.jdmain.results.xmmc}
                          </CellBody>
                        </Cell>
                        <Cell>
                          <CellBody className="liucheng">
                            标段：{this.state.jdmain.results.bd}
                          </CellBody>
                        </Cell>
                        <Cell>
                          <CellBody className="liucheng">
                            变更类型：{this.state.jdmain.results.bglx}
                          </CellBody>
                        </Cell>
                        <Cell>
                          <CellBody className="liucheng">
                            新增人员：
                            {this.state.jdmain.results.addPersonBean.map((item,i)=> {
                              return (
                                <label>{item.name}</label>
                              )
                            })}
                          </CellBody>
                        </Cell>
                        <Cell>
                          <CellBody className="liucheng">
                            删除人员：
                            {this.state.jdmain.results.minusPersonBean.map((item,i)=> {
                              return (
                                <label>{item.name}</label>
                              )
                            })}
                          </CellBody>
                        </Cell>
                        <Cell access link>
                          <CellBody className="liucheng">附件</CellBody>
                          <CellFooter />
                        </Cell>
                      </Cells>
                      :this.state.jdmain.type==3?
                        <Cells style={{
                          marginTop:0,
                          borderBottom:"none"
                        }}>
                          <Cell>
                            <CellBody className="liucheng">
                              编号：{this.state.jdmain.results.id}
                            </CellBody>
                          </Cell>
                          <Cell>
                            <CellBody className="liucheng">
                              项目名称：{this.state.jdmain.results.xmmc}
                            </CellBody>
                          </Cell>
                          <Cell>
                            <CellBody className="liucheng">
                              标段：{this.state.jdmain.results.name}
                            </CellBody>
                          </Cell>
                          <Cell>
                            <CellBody className="liucheng">
                              工程类型：{this.state.jdmain.results.htgclx}
                            </CellBody>
                          </Cell>
                          <Cell>
                            <CellBody className="liucheng">
                              发包单位：{this.state.jdmain.results.fbdw}
                            </CellBody>
                          </Cell>
                          <Cell>
                            <CellBody className="liucheng">
                              承包单位：{this.state.jdmain.results.cbdw}
                            </CellBody>
                          </Cell>

                          <Cell access link>
                            <CellBody className="liucheng">附件</CellBody>
                            <CellFooter />
                          </Cell>
                        </Cells>
                        :null}
                </PanelBody>

                <Steps style={{
                  marginTop:20,
                  marginLeft:15
                }} current={1} direction="vertical">
                  {this.state.jdmain.statusValue.map((item,i)=> {
                    return (
                      <Step
                        key={i+1}
                        status={item.icon}
                        title={item.status}
                        description={item.description}
                      />
                    )
                  })}
                </Steps>
              </Panel>
              :
              this.state.jdmain.searchAction?
                <Panel style={{marginTop: 0}}>
                  <PanelBody>
                    <MediaBox>搜索不到结果</MediaBox>
                  </PanelBody>
                </Panel>
                :
                null
          }
        </div>
    );
  }

  componentWillMount() {

  }

  componentDidMount() {
    Actions.getStatusDes();
  }


  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.jdmain || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Jdmain, Reflux.connect(Store, 'jdmain'));


export default Jdmain ;
